!DOCTYPE html>
<html>
    <head>  
        <meta charset="utf-8">  
        <title>我的行程</title>  
        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">  
        <meta name="apple-mobile-web-app-capable" content="yes">  
        <meta name="apple-mobile-web-app-status-bar-style" content="black">  
        <link rel="stylesheet" href="../css/mui.min.css">  
		<link rel="stylesheet" type="text/css" href="../css/user/myRoute.css"/>
		<script src="../js/mui.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/mui.pullToRefresh.js" ></script>
		<script src="../js/mui.pullToRefresh.material.js"></script>
		<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/axios.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/base.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/config.js" type="text/javascript" charset="utf-8"></script>
		<script src="https://cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js"></script>
		<script type="text/javascript">
			mui.init()
		</script>
		<style>
			html,
			body {
				background-color: #efeff4;
			}
			.mui-bar~.mui-content .mui-fullscreen {
				top: 44px;
				height: auto;
			}
			.mui-pull-top-tips {
				position: absolute;
				top: -20px;
				left: 50%;
				margin-left: -25px;
				width: 40px;
				height: 40px;
				border-radius: 100%;
				z-index: 1;
			}
			.mui-bar~.mui-pull-top-tips {
				top: 24px;
			}
			.mui-pull-top-wrapper {
				width: 42px;
				height: 42px;
				display: block;
				text-align: center;
				background-color: #efeff4;
				border: 1px solid #ddd;
				border-radius: 25px;
				background-clip: padding-box;
				box-shadow: 0 4px 10px #bbb;
				overflow: hidden;
			}
			.mui-pull-top-tips.mui-transitioning {
				-webkit-transition-duration: 200ms;
				transition-duration: 200ms;
			}
			.mui-pull-top-tips .mui-pull-loading {
				/*-webkit-backface-visibility: hidden;
				-webkit-transition-duration: 400ms;
				transition-duration: 400ms;*/
				
				margin: 0;
			}
			.mui-pull-top-wrapper .mui-icon,
			.mui-pull-top-wrapper .mui-spinner {
				margin-top: 7px;
			}
			.mui-pull-top-wrapper .mui-icon.mui-reverse {
				/*-webkit-transform: rotate(180deg) translateZ(0);*/
			}
			.mui-pull-bottom-tips {
				text-align: center;
				font-size: 15px;
				line-height: 40px;
				color: #777;
			}
			.mui-pull-top-canvas {
				overflow: hidden;
				border-radius: 40px;
				box-shadow: 0 4px 10px #bbb;
				width: 40px;
				height: 40px;
				margin: 0 auto;
			}
			.mui-pull-top-canvas canvas {
				width: 40px;
			}
		</style>
    </head>  

    <body>
		<div id="vuemain">
			<header class="mui-bar mui-bar-nav mui-bar-nav-bg bar" style="border: 0; box-shadow: none;">
				<a id="icon-menu" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
				<span class="header-title">我的行程</span>
			</header>
			<div class="record-main">
				<div id="slider" class="mui-slider">
					<div class="mybar">
						<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted my-bar">  
							<a class="mui-control-item mui-active" href="#item1mobile">  
								未完成  
							</a>  
							<a class="mui-control-item" href="#item2mobile">
								已完成  
							</a>
						</div>
						<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-6"></div>  
					</div>
				    
				    <div class="mui-slider-group">  
				        <div id="item1mobile" class="mui-slider-item mui-control-content mui-active">  
				            <div id="scroll1" class="mui-scroll-wrapper">  
				                <div class="mui-scroll">  
				                    <ul class="mui-table-view">  
				                        <li v-for="item in record_uncomplete" >
				                            <div class="mui-card routeInfo_card" >
				                            	<div class="mui-card-content card-content">
				                            		<div class="other">
				                            			<div class="time">
				                            				<img src="../imgs/clock.png" class="route-clock-img" alt="" style="width: 1.5rem; height: 1.5rem;">
				                            				<span class="word-time">{{item.publish_time}}</span>
				                            			</div>
														<div class="btngroup">
															<button class="delete" @click.stop="delOrder(item.record_id)">删除</button>
															<button class="detail" @click.stop="showContent(item.record_id)">详情</button>
														</div>
				                            		</div>
				                            		<div class="routeInfo">
				                            			<div class="route-item">
				                            				<div class="title">
				                            					<img src="../imgs/user/circle1.png" class="route-img" alt="" style="width: 1.4rem;height: 1.4rem;">
				                            					<span class="word">起点</span>
				                            				</div>
				                            				<div class="route-content">
				                            					{{item.origin}}
				                            				</div>
				                            			</div>
				                            			<div class="route-item">
				                            				<div class="title">
				                            					<img src="../imgs/user/circle2.png" class="route-img" alt="" style="width: 1.5rem;height: 1.5rem;">
				                            					<span class="word">终点</span>
				                            				</div>
				                            				<div class="route-content">
				                            					{{item.destination}}
				                            				</div>
				                            			</div>
				                            		</div>
				                            	</div>
				                            </div>
				                        </li>
										
				                    </ul>  
				                </div>  
				            </div>  
				        </div>  
				        <div id="item2mobile" class="mui-slider-item mui-control-content">  
				            <div id="scroll2" class="mui-scroll-wrapper">  
				                <div class="mui-scroll">  
				                    <ul class="mui-table-view">  
				                         <li v-for="item in record_completed">  
				                            <div class="mui-card routeInfo_card" >
				                            	<div class="mui-card-content card-content">
				                            		<div class="other">
				                            			<div class="time">
				                            				<img src="../imgs/clock.png" class="route-clock-img" alt="" style="width: 1.5rem; height: 1.5rem;">
				                            				<span class="word-time">{{item.publish_time}}</span>
				                            			</div>
														<div class="btngroup">
															<button class="detail" @click.stop="showContent(item.record_id, true)">详情</button>
														</div>
				                            		</div>
				                            		<div class="routeInfo">
				                            			<div class="route-item">
				                            				<div class="title">
				                            					<img src="../imgs/user/circle1.png" class="route-img" alt="" style="width: 1.4rem;height: 1.4rem;">
				                            					<span class="word">起点</span>
				                            				</div>
				                            				<div class="route-content">
				                            					{{item.origin}}
				                            				</div>
				                            			</div>
				                            			<div class="route-item">
				                            				<div class="title">
				                            					<img src="../imgs/user/circle2.png" class="route-img" alt="" style="width: 1.5rem;height: 1.5rem;">
				                            					<span class="word">终点</span>
				                            				</div>
				                            				<div class="route-content">
				                            					{{item.destination}}
				                            				</div>
				                            			</div>
				                            		</div>
				                            	</div>
				                            </div>
				                        </li>
				                    </ul>  
				                </div>  
				            </div>
				        </div>
				    </div>  
				</div>
			</div>
		</div>
    </body>  

</html>
<script>

	(function ($) {
		//阻尼系数
		var deceleration = mui.os.ios ? 0.003 : 0.0009;
		$('.mui-scroll-wrapper').scroll({
			bounce: false,
			indicators: true, //是否显示滚动条
			deceleration: deceleration
		});
		
		var pageNum=null;
        var pageNum1=1;
        var pageNum2=1;
		$.ready(function () {
			//循环初始化所有下拉刷新，上拉加载。
			$.each(document.querySelectorAll('.mui-slider-group .mui-scroll'), function (index, pullRefreshEl) {
				$(pullRefreshEl).pullToRefresh({
					up: {
						auto: true, //自动执行一次上拉加载，可选；
						show: true, //显示底部上拉加载提示信息，可选；      
						contentrefresh: '正在加载...', //上拉进行中提示信息
						contentnomore: '没有更多数据了', //上拉无更多信息时提示信息
						callback:function () {
							var self = this;
							if(index == 0){
								pageNum = pageNum1++;
							}else{
								pageNum = pageNum2++;
							}
							var res = loadMore(index, pageNum)
							setTimeout(function () {
								self.endPullUpToRefresh(res);
							},1000)
						}
					},
					down: {
						callback: function(){
							console.log('=======')
							var self = this;
							if(index == 0){
								pageNum = pageNum1++;
							}else{
								pageNum = pageNum2++;
							}
							var res = loadMore(index, 1)
							setTimeout(function() {
								self.endPullDownToRefresh(res);
							}, 1000);
						}
					}
				});
			});
		});
	})(mui);
	
	var route_computedPage = null
	mui.plusReady(function(){
		if(!route_computedPage){
			route_computedPage = mui.preload({
				id: 'route_computed.html',
				url: 'route_computed.html'
			})
			plus.nativeUI.closeWaiting()
		}
	})
	
	var VueObject = new Vue({
		el: '#vuemain',
		data: function(){
			return {
				//	未完成订单
				record_uncomplete: [],
				//	已完成订单
				record_completed: []
			}
		},
		methods: {
			showContent(record_id, complete){
				mui.fire(route_computedPage, 'LoadOrderDetail',{list: [record_id], complete: complete})
				route_computedPage.show('slide-in-right')
			},
			delOrder(record_id) {
				var btnArray = ['否', '是'];
				mui.confirm('确定删除订单?','通知',btnArray,function(e){
					if (e.index == 1) {
						axios.get(baseURL + '/delOrder',{params: {record_id: record_id}}).then(res => {
							if(res.data.status == 10000){
								mui.toast('操作成功')
								plus.nativeUI.showWaiting('加载中...', {
									width: '100px',
									height: '100px'
								})
								//两秒后自刷新
								setTimeout(function(e){
									location.reload()
								},2000)
							}
						})
					}
				})
			}
		}
	})
	
	
	function loadMore(index, pageNum){
		if(index == 0){
			//未完成,已接单
			var data = {
				page: pageNum,
				status: 0
			}
		}else{
			//已完成
			var data = {
				page: pageNum,
				status: 1
			}
		}
		axios.get(baseURL + '/getRouteList', {params: data})
		.then(res => {
			if(index == 0){
				VueObject.record_uncomplete = res.data.data
			}else{
				VueObject.record_completed = res.data.data
			}
		})
		//加载完新数据后，必须执行如下代码，true表示没有更多数据了：
		return true;
	}
	

	
</script>  